import React, { memo } from 'react';
import { renderRoutes } from 'react-router-config';
import { Layout } from 'antd';

import LeftMenu from '@/components/left-menu';
import AppHeader from '../../components/app-header';
import AppFooter from '../../components/app-footer';

import './index.less';

export default memo(function Index(props) {
  const { Content } = Layout;
  const {
    route: { routes },
  } = props;
  /* 加在路由 */
  return (
    <div className="index">
      <Layout className="my-layout">
        <LeftMenu />
        <Layout>
          <AppHeader />
          <Content style={{ margin: '24px 16px 0' }}>
            <div
              className="site-layout-background"
              style={{ padding: 24, minHeight: 360 }}
            >
              {renderRoutes(routes)}
            </div>
          </Content>
          <AppFooter />
        </Layout>
      </Layout>
    </div>
  );
});
